<template>
  <div class="container">
    <el-dialog
      class="previewDialog"
      title="题目预览"
      :visible.sync="isPreviewDialogVisible"
      :before-close="isClose"
      width="65%"
    >
      <el-row>
        <el-col :span="6" class="pd10"
          >【题型】：
          <span v-if="previewData.questionType === '1'">单选</span>
          <span v-else-if="previewData.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </el-col>
        <el-col :span="6" class="pd10">【编号】：{{ previewData.id }}</el-col>
        <el-col :span="6" class="pd10"
          >【难度】：
          <span v-if="previewData.difficulty === '1'">简单</span>
          <span v-else-if="previewData.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </el-col>
        <el-col :span="6" class="pd10">【标签】：{{ previewData.tags }}</el-col>
        <el-col :span="6" class="pd10">【学科】：{{ previewData.subjectName }}</el-col>
        <el-col :span="6" class="pd10">【目录】：{{ previewData.directoryName }}</el-col>
        <el-col :span="6" class="pd10">【方向】：{{ previewData.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div style="color: blue"></div>
      <!-- 单选题 -->
      <div v-if="previewData.questionType === '1'">
        <p>单选题 选项：（以下选中的选项为正确答案）</p>
        <el-radio-group :value="rightRad">
          <el-radio
            v-for="item in previewData.options"
            :key="item.id"
            :label="item.isRight"
            class="dis-block"
            >{{ item.title }}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 多选题 -->
      <div v-else-if="previewData.questionType === '2'">
        <p>多选题 选项：（以下选中的选项为正确答案）</p>

        <el-checkbox
          v-for="item in previewData.options"
          :key="item.id"
          :value="item.isRight === 0 ? false : true"
          class="dis-block"
          >{{ item.title }}</el-checkbox
        >
      </div>
      <!-- 简答题 -->
      <div v-else></div>
      <hr />
      【参考答案】：
      <el-button type="danger" size="small" @click="showVideo">视频答案预览</el-button>
      <div class="video" v-show="videoShow">
        <video
          id="videoid"
          controls="controls"
          :src="previewData.videoURL"
          style="width: 100%; height: 100%"
        />
      </div>

      <hr />
      【答案解析】：
      <div style="display: inline-block; padding: 15px 0" v-html="previewData.answer"></div>
      <hr />
      【题目备注】：{{ previewData.remarks }}

      <span slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="isClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  data() {
    return {
      rightRad: 1,
      videoShow: false,
      isPreviewDialogVisible: false, //控制预览对话框的显示与隐藏
    }
  },
  props: {
    previewData: {
      type: Object,
      required: true,
    },
  },
  methods: {
    showVideo() {
      this.videoShow = true
      document.getElementById('videoid').play()
    },
    isClose() {
      this.isPreviewDialogVisible = false
      this.videoShow = false
      document.getElementById('videoid').pause()
    },
  },
}
</script>

<style scoped lang='scss'>
.previewDialog {
  ::v-deep.el-dialog__footer {
    text-align: right;
  }
}
.pd10 {
  padding: 10px 0;
}
.dis-block {
  display: block;
  padding: 8px 0;
}
.video {
  width: 400px;
  height: 300px;
  display: block;
}
</style>
